<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>文件上传</title>
    </head>
    <body>
    
    <div class="col-xs-12 col-sm-5">
    			<div class="col-xs-3 pt-5 px-0 " style="">
         			<img src="/images/car2.png" class="img-responsive  "  alt="Cinque Terre"/>
    			</div>
    			<div class="col-xs-9">
    				<div class="col-xs-8 px-0"><h4 class="mb-5 text-nowrap p_text_over" >包车一日游，游遍成都 </h4></div>
    				<div class="col-xs-4 px-0"><h4><span class="pull-right c-r" ><strong>600元</strong></span></h4></div>
    				<div class="col-xs-12 px-0"><p class="text-muted p_text_over mb-5" style=" ">舒适空调商务专车，可乘坐6人，拥有车载wifi，车内宽敞舒适，优秀专业的驾驶员，全程自由安排</p></div>
    				<div class="col-xs-12 px-0"><p class="text-nowrap p_text_over c-y mb-5" >行程自由安排，线上行程助理为你服务</p></div>
    			
    			</div>
    		</div>
    		<div class="col-xs-12 col-sm-5 col-sm-offset-1">
    			<div class="col-xs-3 pt-5 px-0 " style="">
         			<img src="/images/car3.png" class="img-responsive  "  alt="Cinque Terre"/>
    			</div>
    			<div class="col-xs-9">
    				<div class="col-xs-8 px-0"><h4 class="mb-5 text-nowrap p_text_over" >成都-九寨沟自由行 交通巴士</h4></div>
    				<div class="col-xs-4 px-0"><h4><span class="pull-right c-r" ><strong>249元</strong></span></h4></div>
    				<div class="col-xs-12 px-0"><p class="text-muted p_text_over mb-5" style=" ">精选优质舒适空调巴士，拥有车载wifi，车内宽敞舒适，优秀专业的驾驶员以及随车服务员，全程零购物，赠送10万旅游意外...</p></div>
    				<div class="col-xs-12 px-0"><p class="text-nowrap p_text_over c-y mb-5" >D1成都-汶川-叠溪-松潘-九寨沟 D2九寨沟一日自由行 D3...</p></div>
    			</div>
    		</div>
    		<div class="col-xs-12 col-sm-5">
    			<div class="col-xs-3 pt-5 px-0 " style="">
         			<img src="/images/car4.png" class="img-responsive  "  alt="Cinque Terre"/>
    			</div>
    			<div class="col-xs-9">
    				<div class="col-xs-8 px-0"><h4 class="mb-5 text-nowrap p_text_over" >成都-色达-精品三日游 </h4></div>
    				<div class="col-xs-4 px-0"><h4><span class="pull-right c-r" ><strong>698元</strong></span></h4></div>
    				<div class="col-xs-12 px-0"><p class="text-muted p_text_over mb-5" style=" ">7座奔驰商务车，每天发车</p></div>
    				<div class="col-xs-12 px-0"><p class="text-nowrap p_text_over c-y mb-5" >3天时间，2晚住宿，从观音桥到色达，领略藏羌文化，...</p></div>
    			
    			</div>
    		</div>
        <h2>已有文件：</h2>
        <p th:each="file : ${files}">
            [站外图片上传中……(2)]，文件名称：<span th:text="${file.name}"></span>
        </p>
        <hr/>
        <form id="fileUploadForm" method="post" enctype="multipart/form-data" >
       	<input type="hidden"                        
		th:name="${_csrf.parameterName}"
		th:value="${_csrf.token}"/>
            昵称：<input name="name" type="text"/>
            <br/>
            头像：<input name="files" type="file"/>
            
            <br/>
            <button id="btnSubmit" type="submit">确定上传</button>
        </form>
        <p id="result"></p>
        <img alt="123" src="/e32d9546-8acd-4a2f-920f-76264fefef15.png"/>
    </body>
    <script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    
    $(document).ready(function () {

        $("#btnSubmit").click(function (event) {

            //stop submit the form, we will post it manually.
            event.preventDefault();

            fire_ajax_submit();

        });

    });
    
    function fire_ajax_submit() {

        // Get form
        var form = $('#fileUploadForm')[0];

        var data = new FormData(form);

        data.append("CustomField", "This is some extra data, testing");

        $("#btnSubmit").prop("disabled", true);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/multi",
            data: data,
            //http://api.jquery.com/jQuery.ajax/
            //http://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
            processData: false, //prevent jQuery from automatically transforming the data into a query string
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {

                $("#result").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);

            },
            error: function (e) {

                $("#result").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);

            }
        });

    }
    </script>
</html>